<template>
  <div class="merchantsList">
    <div class="top">
      <el-form :inline="true" :model="filter" class="demo-form-inline">
        <el-form-item label="公司名称：">
          <el-input v-model="filter.merchantName" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称：">
          <el-input v-model="filter.shopName" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="商户编号：">
          <el-input v-model="filter.id" placeholder="请输入商户编号"></el-input>
        </el-form-item>
        <el-form-item label="行业类型：">
          <el-select v-model="filter.shopType" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管辖区域：">
          <el-select v-model="filter.areaId" placeholder="请选择">
            <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册状态：">
          <el-select v-model="filter.type" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户状态：">
          <el-select v-model="filter.status" placeholder="请选择">
            <el-option v-for="item in statusOptions" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区：">
          <el-cascader filterable :props="{ checkStrictly: true ,value: 'id',label: 'label',children: 'children'}" v-model="cityValue"
            :options="cityOptions" @change="cityChange">
          </el-cascader>
        </el-form-item>
        <!-- <el-form-item label="法人姓名：">
          <el-input
            v-model="filter.name"
            placeholder="请输入法人姓名"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="setReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="lef">
          <div class="" v-for="item in govStatusLs" :class="['list', currentNavtab == item.id ? 'active' : '']"
            :key="item.id" :value="item.id" @click="handleTab(item.id)">
            {{ item.value }} <span>({{ item.num }})</span>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="BatchSynchronization" v-if="filter.govStatus==3">批量同步</el-button>
          <el-button type="primary" @click="geReport">预警同步</el-button>
        </div>
        <!-- <el-button type="primary" @click="geReport">预警同步</el-button> -->
        <!-- <export-excel-button
          title="商家列表"
          action="/merchant/v1/userDetail/export"
          :params="ExportParams"
        /> -->
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:operate="{ scope }">
          <el-button size="small" @click="getAudit(scope.row)" v-if="scope.row.govStatus=='未同步'">数据同步</el-button>
          <el-button size="small" @click="getAudit(scope.row)" v-if="scope.row.govStatus=='已同步'">数据同步更新</el-button>
          <el-button @click="lookDetail(scope.row)" size="small">查看</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog v-if="detailDialog" :id="id" :merchantId="merchantId" :visible.sync="detailDialog"
      @success="_handleSuccess" />
    <detail-dialogtwo v-if="detailDialog2" :id="id" :visible.sync="detailDialog2" @success="_handleSuccess" />
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  // components
  import DetailDialog from "./components/dataSynchronization/DetailDialog";
  import DetailDialogtwo from "./components/dataSynchronization/DetailDialogtwo";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  // api
  import {
    govList,
    govstatusTotal,
    govshopType,
    govdetail,
    editBatch,
    getCity,
  } from "@/api/merchants";
  import {
    userAreaSelect,
  } from "@/api/common";
  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "dataSynchronization",
    components: {
      DetailDialog,
      ExportExcelButton,
      DetailDialogtwo,
    },
    mixins: [handlePageMixin],
    computed: {
      ...mapState({
        statusList: function (state) {
          return state.common["merchant_apply_status"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
        industryStatusType: function (state) {
          return state.common["industry_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
      }),
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        return params;
      },
    },
    data() {
      return {
        value: [],
        loading: false,
        detailDialog2: false,
        govStatusLs: [{
            id: 0,
            value: "全部",
            num: ""
          },
          {
            id: 3,
            value: "未同步",
            num: 0
          },
          {
            id: 1,
            value: "已同步",
            num: 0
          },
        ],
        typeOptions: [{
            id: '',
            value: "全部",
          },
          {
            id: 1,
            value: "正常",
          },
          {
            id: 2,
            value: "待使用",
          },
        ],
        statusOptions: [{
            id: '',
            value: "全部",
          },
          {
            id: 1,
            value: "正常",
          },
          {
            id: 3,
            value: "待审核",
          },
          {
            id: 2,
            value: "黑名单",
          },
          {
            id: 4,
            value: "已拒绝",
          },
          {
            id: 5,
            value: "异常",
          },
        ],
        options: [],
        tableColumn: [{
            prop: "govArea",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "district",
            label: "地区",
            width: "200"
          },
          {
            prop: "merchantName",
            label: "公司名称"
          },
          {
            prop: "shopName",
            label: "店铺名称",
          },
          {
            prop: "typeName",
            label: "行业类型",
          },
          {
            prop: "type",
            label: "商户注册状态",
          },
          {
            prop: "statusDict",
            label: "商户状态"
          },
          {
            prop: "govStatus",
            label: "数据同步状态",
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "200",
            fixed: "right",
          },
        ],
        filter: {
          areaId: '', //区域id
          id: "", //商家编号
          shopName: "", //店铺名称
          merchantName: "", //公司名称
          shopType: "", //行业类型id
          // name: "",//法人名称
          govStatus: "", //3 为未同步   非3为同步
          type: '', //注册状态： 1正常  2待使用
          status: '', //商户状态：1正常、3待审核、2黑名单、4已拒绝、5异常
          province: "", //省编码
          city: "", //市编码
          area: "", //区域编码
        },
        tableData: [],
        currentNavtab: 0,
        detailDialog: false,
        normal: "",
        blacklist: "",
        isShow: true,
        AccountList: [], //关联资金账户查询列表
        // industryStatusType: [],//行业字典
        typeLs: [],
        id: '',
        merchantId: '',
        types: '',
        areaSelect: [], //区域下拉
        cityOptions:[],//地区下拉
        cityValue:[],//地区选中数据
      };
    },

    created() {
      // this.getDict()
      this.getCity();
      this.getTypels();
      this.getUserAreaSelect();
      this.getList();
      this.getNum();
    },
    methods: {
      //获取字典
      getDict() {
        console.log("hahahah");
        var dictType = "industry_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.industryStatusType = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getTypels() { //查询行业下拉
        this.loading = true;
        govshopType()
          .then((res) => {
            this.options = res.result
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getUserAreaSelect() {
        //查询用户区域下拉框
        userAreaSelect().then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.areaSelect = arr.concat(res.result);
        });
      },
      //查询城市数据
      getCity() {
        const params = {};
        getCity(params)
          .then((res) => {
            this.cityOptions = res.result;
            this.cityOptions.forEach((item) => {
              item.children.forEach((items) => {
                items.children.forEach((itemss) => {
                  if (itemss.children.length == 0) {
                    itemss.children = null
                  }
                })
              })
            })
          })
          .finally(() => {});
      },
      //地区选择
      cityChange(value) {
        let _this = this;
        console.log(value);
        console.log(value.length)
        if (value.length == 1) {
          _this.filter.province = value[0];
          _this.filter.city = "";
          _this.filter.area = "";
        } else if (value.length == 2) {
          _this.filter.city = value[1];
          _this.filter.area = "";
        } else if (value.length == 3) {
          _this.filter.area = value[2];
        } else {
          _this.filter.province = "";
          _this.filter.city = "";
          _this.filter.area = "";
        }
      },
      handleChange(value) {
        let _this = this;
        console.log("value+++++++++++++", value[1]);
        _this.filter.shopType = value[1];
      },
      //同步数据详情
      getgovdetail(id) {
        this.loading = true;
        govdetail(id)
          .then((res) => {

          })
          .finally(() => {
            this.loading = false;
          });
      },
      //数据更新
      getAudit(e) {
        this.id = e.id;
        this.merchantId = e.merchantId;
        this.detailDialog = true;
      },
      //批量同步
      BatchSynchronization() {
        this.$confirm('是否执行批量同步?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            ...this.filter
          }
          editBatch(data)
            .then((res) => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.setReset()
            })
        }).catch(() => {});
      },
      //预警同步
      geReport(id) {
        this.id = id;
        this.detailDialog2 = true;
      },
      //查看详情
      lookDetail(e) {
        this.$router.push({
          path: "/merchants/synchronization-detail",
          query: {
            id: e.id,
            merchantId: e.merchantId
          },
        });
      },
      select(value) {
        console.log("select", value);
      },
      //切换选项
      handleTab(id) {
        console.log("id", id), (this.currentNavtab = id);
        if (id == 0) {
          this.filter.govStatus = ''
        } else {
          this.filter.govStatus = id
        }
        this.getList();
      },
      //列表
      getList() {
        this.loading = true;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        govList(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            records.forEach((item) => {
              if (item.govStatus == 3) {
                item.govStatus = '未同步'
              } else {
                item.govStatus = '已同步'
              }
              // 商户注册状态1.正常 2.待使用
              if (item.type == 1) {
                item.type = '正常'
              } else {
                item.type = '待使用'
              }
              if (item.statusDict == '') {
                item.statusDict = '-'
              }
              item.typeName = item.shopTypeParentName + '-' + item.shopTypeName
              item.district = item.cityName + '-' + item.areaName
            });
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //查询审核条数
      getNum() {
        this.loading = true;
        let data = {
          areaId: this.filter.areaId,
        }
        govstatusTotal(data)
          .then((res) => {
            // const { total,waitingAudit, normal, blacklist,refused } = res.result;
            this.govStatusLs[0].num = res.result.total;
            this.govStatusLs[1].num = res.result.notSynchronize;
            this.govStatusLs[2].num = res.result.synchronize;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      _handleSuccess() {
        this.getList();
        this.getNum()
        this.detailDialog = false;
      },
      //重置
      setReset() {
        this.cityValue = []
        this.filter = {};
        this.currentNavtab = 0;
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum();
      },
      //搜索
      search() {
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum();
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "./style/merchantsList";

  .el-select .el-input {
    width: 130px;
  }

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
